<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Tree Widget Test (dynamic node creation)</title>

<!--
Uncomment this to debug tree positioning
<style>
table {
	border: solid blue;
}
td {
	border: solid yellow;
}
</style>
-->
<script type="text/javascript">
	var djConfig = {isDebug: true};
	//var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>
<script type="text/javascript" src="../../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.lang.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Tree");
	dojo.require("dojo.widget.TreeSelector");
	dojo.hostenv.writeIncludes();
</script>
<script type="text/javascript">

	// TODO: fix runtime creation/modification stuff

	function Subscriber(displayNode){
		this.displayNode = displayNode;

		this.update = function(message) {
			this.displayNode.innerHTML = message.node.title;
		};
	}

	dojo.addOnLoad(function(){

		var tree = dojo.widget.createWidget("Tree", {toggle: "fade", selector: "treeSelector"});
		document.body.appendChild(tree.domNode);

		var rootNode = dojo.widget.createWidget("TreeNode", {title: "Root Node"});
		tree.addChild(rootNode);

		var node1 = dojo.widget.createWidget("TreeNode", {title: "Node 1"});
		rootNode.addChild(node1);

		rootNode.addChild(dojo.widget.createWidget("TreeNode", {title: "Node 2"}));
		var node3 = dojo.widget.createWidget("TreeNode", {title: "Node 3"});
		rootNode.addChild(node3);
		var node3_1 = dojo.widget.createWidget("TreeNode", {title: "Node 3.1"});
		node3.addChild(node3_1);
		node3_1.addChild(dojo.widget.createWidget("TreeNode", {title: "Node 3.1.1"}))

		tree.addChild(dojo.widget.createWidget("TreeNode", {title: "Root Node 2"}));

		// Add some nodes the first element (rather than the last element) just for testing
		for(var i=1;i<5;i++) {
			node1.addChild(dojo.widget.createWidget("TreeNode", {title: "Node 1."+i}));
		}

		var selectedEventName = dojo.widget.byId("firstTree").selector.eventNames.select;

		var eventSub = new Subscriber(document.getElementById("SelectionEvents"));
		var selectionTopic = dojo.event.topic.getTopic(selectedEventName);
		selectionTopic.subscribe(eventSub, "update");
	});


	function get_selected_node(){
		var node = dojo.widget.byId('treeSelector').selectedNode;
		if (node){
			alert("The selected node is "+node.title);
		}else{
			alert("There is no selected node");
		}
	}

</script>
</head>
<body>

<h4>Create two trees with HTML & program way. Use same selector for both.</h4>

<dojo:TreeSelector widgetId="treeSelector"></dojo:TreeSelector>

<div dojoType="Tree" toggle="fade" selector="treeSelector" widgetId="firstTree">
    <div dojoType="TreeNode" title="Item 1">
        <div dojoType="TreeNode" title="Item 1.1"><br/></div>
        <div dojoType="TreeNode" title="Item 1.2">
            <div dojoType="TreeNode" title="Item 1.2.1"></div>
            <div dojoType="TreeNode" title="Item 1.2.2"></div>
        </div>
        <div dojoType="TreeNode" title="Item 1.3">
            <div dojoType="TreeNode" title="Item 1.3.1"></div>
            <div dojoType="TreeNode" title="Item 1.3.2"></div>
        </div>
        <div dojoType="TreeNode" title="Item 1.4">
            <div dojoType="TreeNode" title="Item 1.4.1"></div>
        </div>
    </div>
</div>

<p>this is some text below the tree.</p>

<p><input type="button" value="What node is selected ?" onclick="get_selected_node();" /></p>

<div id="SelectionEvents" style="background:#dcdcdc; color:#191970;">Selection events should show up here</div>



</body>
</html>

